<template>
  <div class="main-container">
    <div class="form-container">
      <el-steps style="max-width: 100%" :active="0" finish-status="success" align-center>
        <el-step title="查看差旅规章制度" description="View rules" />
        <el-step title="申请出差" description="Apply for travel" />
        <el-step title="规划行程" description="Plan schedules" />
        <el-step title="预算申请" description="Budget request" />
        <el-step title="出差申请完成" description="Success" />
      </el-steps>
      <el-divider />
      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">差 旅 规 章 制 度</div>
      <div class="policy-content">
        <div v-for="(section, index) in policies" :key="index" class="policy-section">
          <h2>{{ section.title }}</h2>
          <ul v-if="section.rules">
            <li v-for="(rule, idx) in section.rules" :key="idx" style="color: #656565">{{ rule }}</li>
          </ul>
          <div v-else style="color: #656565">{{ section.content }}</div>
        </div>
      </div>
      <div style="width: 100%; text-align: center">
        <el-checkbox label="已阅读完毕《公司差旅规章制度》并同意以上规则" v-model="check" style=""/>
      </div>
      <el-form-item style="width: 100%; align-items: center">
        <div style="margin: 10px auto 0;">
          <el-button class="button" type="primary" @click="start">开 始</el-button>
          <el-button class="button" type="info" @click="">取 消</el-button>
        </div>
      </el-form-item>
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref} from "vue";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const check = ref(false)

const policies = [
  {
    title: '第一条、目的',
    content: '为规范出差管理流程、加强出差预算的管理，特制定本制度。'
  },
  {
    title: '第二条、适用范围',
    content: '本制度适用于总公司以及所属子公司因公出差的各级员工，出差涉及事项均须按照本制度规定执行。'
  },
  {
    title: '第三条、出差类型',
    rules: [
      '1、当日出差：出差当日能往返者。',
      '1）当日出差的交通费凭乘车票据实数报销。',
      '2）当日出差人员不得在外住宿，但因需要，提前核准按远途出差办理。',
      '3）短途出差只允许乘坐汽车、火车硬座。',
      '2、远途出差：出差必须在外住宿者。',
      '1）当日出差的交通费凭乘车票据实数报销。',
      '2）远途出差一般选择火车，特殊情况采用汽车，火车超过8个小时可以选择卧铺，特殊情况可申请飞机。'
    ]
  },
  {
    title: '第四条、出差审批流程',
    rules: [
      '1、个人申请出差',
      '1）主管级以下人员需提前申请，并填写《出差审批单》。',
      '2）主管级以上报总经理批准。',
      '2、公司指派出差',
      '1）公司权责部门指派人员出差，需要总经理批准。',
      '3、其他规定',
      '1）员工出差时限由部门核定。'
    ]
  },
  {
    title: '第五条、出差费用标准及相关规定',
    rules: [
      '1、出差时间规定',
      '2、出差费用标准',
      '公司出差费用标准：交通、住宿补贴等。',
      '出差补贴包含餐饮、通讯等，需持相关票据报销。'
    ]
  },
  {
    title: '第六条、出差费用的预借支、核销流程',
    rules: [
      '1、预借支出差费用，需要管理审批，支持借款或自付后核销。',
      '2、费用核销按规定流程办理，需相应票据，否则不予报销。'
    ]
  }
]
const start = () => {
  console.log(check.value);
  if(check.value){
    router.push("/travel/ApplyForTravel");
  }
  else{
    ElMessage({
      message: '请阅读完《公司差旅规章制度》!',
      type: 'warning',
    })
  }
}
</script>

<style scoped>
.main-container {
  width: 100%;
}
.form-container {
  margin: 10px auto;
  width: 55%;
  padding: 2% 5% 0;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
.policy-content {
  max-height: 500px; /* 固定内容区域的最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
  padding-right: 10px; /* 为滚动条留出一些内边距 */
}
.policy-section {
  margin-bottom: 20px;
}

h1,
h2 {
  color: #333;
}

ul {
  padding-left: 20px;
}

li {
  line-height: 1.6;
}
</style>